<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="demo-form-inline">
            <el-form-item label="Application Id">
              <el-input v-model="queryParams.applicationId" placeholder="请输入Application Id" clearable @keyup.enter="handleQuery"/>
            </el-form-item>
            <el-form-item label="Credit Product">
              <el-select v-model="queryParams.creditProduct" placeholder="请选择Credit Product" clearable>
                <el-option label="Mobile phone installment" value="Mobile phone installment" />
              </el-select>
            </el-form-item>
            <el-form-item label="Application Time">
              <el-date-picker
                v-model="queryParams.applicationTime"
                type="daterange"
                range-separator="—"
                start-placeholder="StartTime"
                end-placeholder="EndTime"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">Query</el-button>
              <el-button @click="handleReset">Reset</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="hover">
      <!-- <template #header>
        <el-row :gutter="10" class="mb8">
          <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
        </el-row>
      </template> -->

    <!-- Tab切换 -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="To Be Allocated (0)" name="allocated" />
      <el-tab-pane label="To Be Checked (4)" name="checked" />
      <el-tab-pane label="Return (98)" name="return" />
      <el-tab-pane label="Checked (794)" name="checkedDone" />
      <el-tab-pane label="Total (956)" name="total" />
    </el-tabs>

    <!-- 数据表格 -->
    <el-table v-loading="loading" border :data="caseList" style="width: 100%">
      <el-table-column prop="id" label="ID" align="center" width="80">
        <template #default="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="item" label="Review Waiting" align="center" width="80">
        <template #default="scope">
          <span>{{ scope.row.item }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="applicationId" label="Application Id" align="center" width="160" show-overflow-tooltip>
        <template #default="scope">
          <span>{{ scope.row.applicationId }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="creditProduct" label="Credit Product" align="center" width="180">
        <template #default="scope">
          <span>{{ scope.row.creditProduct }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="applicationTime" label="Application Time" align="center" width="160">
        <template #default="scope">
          <span>{{ scope.row.applicationTime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="customerType" label="Customer Type" align="center" width="160">
        <template #default="scope">
          <span>{{ scope.row.customerType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="mobileNo" label="Mobile No" align="center" width="160">
        <template #default="scope">
          <span>{{ scope.row.mobileNo }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="reviewer" label="Reviewer" align="center" width="180" show-overflow-tooltip>
        <template #default="scope">
          <span>{{ scope.row.reviewer }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="allocationStatus" label="Allocation Status" align="center" width="120">
        <template #default="scope">
          <el-tag type="primary">{{ scope.row.allocationStatus }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="Status" align="center" width="100">
        <template #default="scope">
          <el-tag type="info">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="reviewResult" label="Review Result" align="center" width="150">
        <template #default="scope">
          <span>{{ scope.row.reviewResult }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="Reason" align="center" width="100">
        <template #default="scope">
          <span>{{ scope.row.reason || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="Remark" align="center" width="120">
        <template #default="scope">
          <span>{{ scope.row.remark || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="riskControl" label="Risk Control Result" align="center" width="120">
        <template #default="scope">
          <span>{{ scope.row.riskControl || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Operation" align="center" width="100" fixed="right">
        <template #default="scope">
          <el-button type="link" @click="handleDetail(scope.row)">Detail</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { ElMessage, ElFormInstance } from 'element-plus';
import { useRouter } from 'vue-router';
import { ComponentInternalInstance } from 'vue';

// 定义Case数据类型
interface Case {
  id?: string | number;
  item?: string;
  applicationId?: string;
  creditProduct?: string;
  applicationTime?: string;
  customerType?: string;
  mobileNo?: string;
  reviewer?: string;
  allocationStatus?: string;
  status?: string;
  reviewResult?: string;
  reason?: string;
  remark?: string;
  riskControl?: string;
}

// 定义查询参数类型
interface QueryParams {
  pageNum: number;
  pageSize: number;
  applicationId?: string;
  creditProduct?: string;
  applicationTime?: [string, string];
}

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter();
const loading = ref(false);
const total = ref(4);
const caseList = ref<Case[]>([]);
const activeTab = ref('checked'); // 默认选中"To Be Checked"标签
const showSearch = ref(true);
const queryFormRef = ref<ElFormInstance>();

const queryParams = reactive<QueryParams>({
  pageNum: 1,
  pageSize: 10
});

// 模拟数据
const mockData: Case[] = [
  {
    id: 1,
    item: '10min',
    applicationId: '2019341538609667905',
    creditProduct: 'Mobile phone installment',
    applicationTime: '2025-10-15 13:03:25',
    customerType: 'Distribution Customer',
    mobileNo: '023409088466595',
    reviewer: 'olaoluwa.olabode@palmpay-inc.com',
    allocationStatus: 'allocated',
    status: 'Unassigned',
    reviewResult: 'pending16s To Be Checked',
    reason: '',
    remark: '',
    riskControl: ''
  },
  {
    id: 2,
    item: '11min',
    applicationId: '2019341537631096408',
    creditProduct: 'Mobile phone installment',
    applicationTime: '2025-10-15 13:02:46',
    customerType: 'Distribution Customer',
    mobileNo: '023407082537736',
    reviewer: 'akintunde.oladapo@palmpay-inc.com',
    allocationStatus: 'allocated',
    status: 'Unassigned',
    reviewResult: 'pending17s To Be Checked',
    reason: '',
    remark: '',
    riskControl: ''
  },
  {
    id: 3,
    item: '15min',
    applicationId: '2019341536652524900',
    creditProduct: 'Mobile phone installment',
    applicationTime: '2025-10-15 13:02:07',
    customerType: 'Distribution Customer',
    mobileNo: '023408081164715',
    reviewer: 'tejumola.olumuyiwa@palmpay-inc.com',
    allocationStatus: 'allocated',
    status: 'Unassigned',
    reviewResult: 'pending22s To Be Checked',
    reason: '',
    remark: '',
    riskControl: ''
  },
  {
    id: 4,
    item: '17min',
    applicationId: '2019341535673953392',
    creditProduct: 'Mobile phone installment',
    applicationTime: '2025-10-15 13:01:26',
    customerType: 'Distribution Customer',
    mobileNo: '023407025445946',
    reviewer: 'akintunde.oladapo@palmpay-inc.com',
    allocationStatus: 'allocated',
    status: 'Unassigned',
    reviewResult: 'pending27s To Be Checked',
    reason: '',
    remark: '',
    riskControl: ''
  }
];

/** 获取案例列表 */
const getList = () => {
  loading.value = true;
  // 模拟API调用
  setTimeout(() => {
    // 根据查询参数过滤数据
    let filteredData = [...mockData];
    
    if (queryParams.applicationId) {
      filteredData = filteredData.filter(item => 
        item.applicationId?.toLowerCase().includes(queryParams.applicationId!.toLowerCase())
      );
    }
    
    if (queryParams.creditProduct) {
      filteredData = filteredData.filter(item => 
        item.creditProduct === queryParams.creditProduct
      );
    }
    
    // 模拟分页
    const startIndex = (queryParams.pageNum - 1) * queryParams.pageSize;
    const endIndex = startIndex + queryParams.pageSize;
    caseList.value = filteredData.slice(startIndex, endIndex);
    total.value = filteredData.length;
    loading.value = false;
  }, 500);
};

/** 处理Tab切换 */
const handleTabClick = (tab: any) => {
  queryParams.pageNum = 1;
  // 根据选中的Tab更新数据
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};;

/** 处理查询 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

/** 处理重置 */
const handleReset = () => {
  Object.assign(queryParams, {
    pageNum: 1,
    pageSize: 10,
    applicationId: '',
    creditProduct: '',
    applicationTime: undefined
  });
  getList();
};

/** 处理页码大小变化 */
const handleSizeChange = (size: number) => {
  queryParams.pageSize = size;
  getList();
};

/** 处理页码变化 */
const handleCurrentChange = (current: number) => {
  queryParams.pageNum = current;
  getList();
};

/** 查看详情 */
const handleDetail = (row: Case) => {
  router.push({
    path: `/cases/detail/${row.id}`
  });
};

/** 初始加载 */
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.demo-form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.demo-form-inline .el-form-item {
  margin-right: 10px;
  margin-bottom: 15px;
}
:deep(.el-card__body) {
    padding: 10px 5px !important;
}
:deep(.el-form--inline .el-form-item__label) {
  width: 130px !important;
  text-align: right;
}

.demo-form-inline .el-input,
.demo-form-inline .el-select {
  width: 220px;
}
:deep(.demo-form-inline .el-date-editor) {
  width: 220px;
}
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}





/* Tab样式 */
:deep(.el-tabs__header) {
  margin-bottom: 20px;
}
</style>